<template>
    <div class="page-content-left" ref="left" :style="style" v-if="info.isCollapse==true?style={'width':'auto'}:style={'width':'200px'}">
        <el-menu router :default-openeds="[active]" :unique-opened="true" @open="handleOpen" @close="handleClose" class="el-menu-vertical-demo" v-loading="loading" :collapse="info.isCollapse">
            <el-submenu  v-for="(item,index) in info.listArr" :key="(index+1)+''" :index="(index+1)+''"> 
                <template slot="title">
                    <i :class="[item.iconClass]"></i>
                    <span slot="title">{{item.title}}</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item  v-for="(item1,index1) in item.child" :route="item1.path" :index="(index+1)+'-'+(index1+1)" :key="(index+1)+'-'+(index1+1)" :class="$route.path==item1.path?'is-active':''" v-if="$route.path==item1.path?active=(index+1)+'':'1'">
                        {{item1.title}}
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
    </div>
</template>
<script>
    import config from '../config.js';
    import api from '../api'
    import {bus} from '../bus.js'
    export default{
        mounted(){
            this.loading=true;
            this.getMenu();
            bus.$emit('getMenu',this.getMenu);
        },
        data(){
            return {
                loading:false,
                active:'1'
            }
        },
        props:['info'],
        methods:{
            handleOpen(key, keyPath){
                //console.log(key, keyPath);
            },
            handleClose(key, keyPath){
                //console.log(key, keyPath);
            },
            getMenu(){
                api.$http("/system/getSystemMenu",{},function(err,res){
                    //console.log(res.data);
                    let data=res.data;
                    this.info.listArr=data.info.menu;
                    for(let i=0;i<data.info.menu.length;i++){
                        this.info.listArr[i].child=data.info.submenu[i];
                    }
                    this.loading=false;
                }.bind(this))
            }
        }
    }
</script>
